<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>千锋🤝美团大数据平台</title>
    <link rel="stylesheet" href="./assets/css/reset.css">
</head>

<body>
    <!-- <div class="test"></div> -->

    <!-- 头 -->
    <header>
        <h1>千锋🤝美团大数据平台</h1>
        <span>2022年3月14日18时40分1秒</span>
    </header>
    <!-- 头 -->

    <!-- 内容 -->
    <section class="main">
        <div class="column">
            <div class="box" style="height:4rem">
                <div class="th">
                    <span></span>
                    <h1>标题样式</h1>
                </div>
                <div class="tb"></div>
            </div>
            <div class="box left-mid" style="height:2.6rem">
                <div class="th">
                    <span></span>
                    <h1>标题样式</h1>
                </div>
                <div class="tb">
                    <div class="title">
                        <span>单号</span>
                        <span>金额</span>
                        <span>品名</span>
                        <span>时间</span>
                    </div>
                    <div class="mov">
                        <ul>
                            <li>
                                <span>10002144951</span>
                                <span>199</span>
                                <span>手机</span>
                                <span>18小时</span>
                            </li>
                            <li>
                                <span>10002144951</span>
                                <span>199</span>
                                <span>手机</span>
                                <span>18小时</span>
                            </li>
                            <li>
                                <span>10002144951</span>
                                <span>199</span>
                                <span>手机</span>
                                <span>18小时</span>
                            </li>
                            <li>
                                <span>10002144951</span>
                                <span>199</span>
                                <span>手机</span>
                                <span>18小时</span>
                            </li>
                            <li>
                                <span>10002144951</span>
                                <span>199</span>
                                <span>手机</span>
                                <span>18小时</span>
                            </li>
                            <li>
                                <span>10002144951</span>
                                <span>199</span>
                                <span>手机</span>
                                <span>18小时</span>
                            </li>
                            <li>
                                <span>10002144951</span>
                                <span>199</span>
                                <span>手机</span>
                                <span>18小时</span>
                            </li>
                            <li>
                                <span>10002144951</span>
                                <span>199</span>
                                <span>手机</span>
                                <span>18小时</span>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
            <div class="box left-bottom" style="height:2.6rem">
                <div class="th">
                    <span></span>
                    <h1>标题样式</h1>
                </div>
                <div class="tb"></div>
            </div>
        </div>
        <div class="column">
            <div class="box box-mt" style="height:2.3rem">
                <div class="total">
                    <h1>总体情况<span>（单位：元）</span></h1>
                    <div>193827</div>
                </div>
                <div class="round fir"></div>
                <div class="round sec"></div>
                <div class="round thr"></div>
            </div>
            <div class="box box-m2" style="height:3.5rem"></div>
            <div class="box middle-bottom" style="height:3.4rem">
                <div class="th">
                    <span></span>
                    <h1>标题样式</h1>
                </div>
                <div class="tb"></div>
            </div>
        </div>
        <div class="column">
            <div class="box left-top" style="height:3rem">
                <div class="th">
                    <span></span>
                    <h1>标题样式</h1>
                </div>
                <div class="tb">
                    <table>
                        <tbody>
                            <tr>
                                <th scope="clo">排名</th>
                                <th scope="clo">公司</th>
                                <th scope="clo">数量</th>
                                <th scope="clo">增长率</th>
                            </tr>
                            <tr>
                                <td>
                                    <span>1</span>
                                </td>
                                <td>腾讯科技</td>
                                <td>114万</td>
                                <td>110%</td>
                            </tr>
                            <tr>
                                <td>
                                    <span>2</span>
                                </td>
                                <td>百度公司</td>
                                <td>251611万</td>
                                <td>210%</td>
                            </tr>
                            <tr>
                                <td>
                                    <span>3</span>
                                </td>
                                <td>新浪</td>
                                <td>1.2亿</td>
                                <td>150%</td>
                            </tr>
                            <tr>
                                <td>
                                    <span>4</span>
                                </td>
                                <td>网易</td>
                                <td>1515515万</td>
                                <td>89%</td>
                            </tr>
                            <tr>
                                <td>
                                    <span>5</span>
                                </td>
                                <td>雅虎</td>
                                <td>15615万</td>
                                <td>33%</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="box left-mid" style="height:3rem">
                <div class="box left-top" style="height:3rem">
                    <div class="th">
                        <span></span>
                        <h1>标题样式</h1>
                    </div>
                    <div class="tb">
                        <table>
                            <tbody>
                                <tr>
                                    <th scope="clo">排名</th>
                                    <th scope="clo">公司</th>
                                    <th scope="clo">数量</th>
                                    <th scope="clo">增长率</th>
                                </tr>
                                <tr>
                                    <td>
                                        <span>1</span>
                                    </td>
                                    <td>腾讯科技</td>
                                    <td>114万</td>
                                    <td>110%</td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>2</span>
                                    </td>
                                    <td>百度公司</td>
                                    <td>251611万</td>
                                    <td>210%</td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>3</span>
                                    </td>
                                    <td>新浪</td>
                                    <td>1.2亿</td>
                                    <td>150%</td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>4</span>
                                    </td>
                                    <td>网易</td>
                                    <td>1515515万</td>
                                    <td>89%</td>
                                </tr>
                                <tr>
                                    <td>
                                        <span>5</span>
                                    </td>
                                    <td>雅虎</td>
                                    <td>15615万</td>
                                    <td>33%</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="box right-bottom" style="height:3.2rem">
                    <div class="th">
                        <span></span>
                        <h1>标题样式</h1>
                    </div>
                    <div class="tb"></div>
                </div>
            </div>
    </section>
    <!-- 内容 -->

    <script src="./assets/js/flexible.js"></script>
    <script src="http://unpkg.com/jquery"></script>
    <script src="https://unpkg.com/webopenfather-date@1.0.1/dist/wofDate.js"></script>
    <script src="http://unpkg.com/echarts"></script>
    <script src="./assets/js/left1.js"></script>
    <script src="./assets/js/m2.js"></script>
    <script src="./assets/js/middle-top.js"></script>
    <script src="./assets/js/letf-bottom.js"></script>
    <script src="./assets/js/middle-bottom.js"></script>
    <script src="./assets/js/right-bottom.js"></script>
    <script src="./assets/js/right-mid.js"></script>
    <script>
        // console.log(wofDate.format('Y-m-d H:i:s'))
        // console.log(wofDate.format('Y/m/d'))
        // console.log(wofDate.format('Y/m/d H:i:s'))
        setInterval(() => {
            $('header span').html(wofDate.format('Y年m月d日H时i分s秒'))
        }, 1000)
    </script>
</body>

</html>